<!DOCTYPE html>
<html>

<head>
    <title>Bootstrap 模板</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入 Bootstrap -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 Shiv 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
    <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
    <!--[if lt IE 9]>
         <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
         <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
      <![endif]-->
</head>

<body>
    <div>
        name <input type="text" name="name1" id="name1">
        password <input type="passowrd" name="password1" id="password1">
        <button class="dl">登录</button>
    </div>
    <!-- 查询 -->
    <table class="table table-striped">
        <caption>用户信息表</caption>
        <thead>
            <tr>
                <th>序号</th>
                <th>用户名</th>
                <th>账号</th>
                <th>密码</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
    <!-- 注册 -->
    <h2>用户注册(user)</h2>
    <!-- 按钮触发模态框 -->
    <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">用户注册</button>
    <!-- 模态框（Modal） -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">奈雪注册</h4>
                </div>
                <div class="modal-body">
                    <p>用户名：<input type="text" name="name" id="name"></p>
                    <p>账号：<input type="text" name="name" id="number"></p>
                    <p>密码：<input type="password" name="name" id="password"></p>
                    <p>确认密码：<input type="password" name="name" id="passwords"></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary tijiao">提交更改</button>

                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->


    </div>
    <!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
    <script src="https://fastly.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ"
        crossorigin="anonymous"></script>
    <!-- 包括所有已编译的插件 -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
        integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
        crossorigin="anonymous"></script>
    <script>

        //查询
        $.ajax({
            type: "post",
            url: "/shaveAll",

            success: function (response) {
                response.forEach((item, index) => {
                    let nav = `
                            <tr>
                                <th>${index + 1}</th>
                                <th>${item.name}</th>
                                <th>${item.number}</th>
                                <th>${item.password}</th>
                                <th><button class='shanchu' id='${item.id}'>删除</button></th>
                            </tr>
                          `
                    $("tbody").append(nav)
                });
                shanchu();
            }
        });
        // 注册
        $(".tijiao").click(function () {
            $.ajax({
                type: "post",
                url: "/zhuce",
                data: {
                    name: $("#name").val(),
                    number: $("#number").val(),
                    password: $("#password").val()
                },
                success: function (response) {
                   console.log(response);
                }
            });
            alert("注册成功")
        })
        //删除
        function shanchu() {
            $(".shanchu").click(function (e) {
                console.log();
                $.ajax({
                    type: "get",
                    url: "/shanchu",
                    data: {
                        id: this.id
                    },
                    success: function (response) {
                    }
                });
                alert("删除成功")
            })
        }
        //登录
        $(".dl").click(function () {
            $.ajax({
                type: "post",
                url: "/denglu",
                data: {
                    name: $("#name1").val(),
                    password: $("#password1").val()
                },
                success: function (response) {
                    let res = JSON.parse(response)
                    let passwords = res[0].password
                    if (passwords == $("#password1").val()) {
                        alert("登录成功")
                        sessionStorage.setItem("user",response)
                    } else {
                        alert("账号或密码有误")
                    }

                }
            });
        })
    </script>
</body>

</html>